<template>
  <div class="department">
    <!-- 卡片容器 -->
    <el-card>
      <!-- 顶部导航 -->
      <el-tabs v-model="activeName" class="mytab">
        <el-tab-pane label="组织架构" name="first" />
      </el-tabs>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 内-总公司 -->
        <treetool :mydata="myObj" @openAdd="openAdd" />
        <!-- 线 -->
        <hr>
        <!-- 内-子公司 -->
        <el-tree class="son" :data="list" default-expand-all>
          <template slot-scope="{ data }">
            <treetool
              :mydata="data"
              @updatedata="deptList"
              @openAdd="openAdd"
              @openEdit="openEdit"
            />
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增面板 -->
    <template>
      <addDept
        ref="myadd"
        :dialog-show="dialogShow"
        :current-id="currentId"
        @hideDialog="dialogShow = false"
        @updatedata="deptList"
      />
      <!-- 有父子组件之间的两个事件的数据传递，形成了一个类似于双向数据绑定的情形，所以代码可以简化 -->
      <!-- <adddept :dialog-show.sync="dialogShow" /> -->
    </template>
  </div>
</template>

<script>
import treetool from './compment/treetool.vue'
import addDept from './compment/addDept.vue'
import { deptListAPI } from '@/api/index'
export default {
  components: { treetool, addDept },
  data() {
    return {
      activeName: 'first',
      // 保存树状结构的数据源的数组
      list: [],
      // 头部结构的数据源
      myObj: {
        // label: '江苏传智播客教育科技股份有限公司',
        // isHead: true // 用于判断当前结构是否是头部结构
      },
      // 控制新增面板的显示与隐藏
      dialogShow: false,
      // 当前操作的id
      currentId: ''
    }
  },
  created() {
    // 打开页面时，得到组织架构的数据源
    this.deptList()
  },
  methods: {
    // 打开编辑面板
    openEdit(id) {
      this.dialogShow = true
      // 获取编辑面板中的详情数据: 调用编辑面板中的方法
      this.$refs.myadd.getDeptDetail(id)
    },
    // 打开新增部门面板
    openAdd(id) {
      this.dialogShow = true
      // 拿到传递过来的部门id并赋值
      this.currentId = id
    },
    // 得到组织架构的数据源
    async deptList() {
      try {
        // 发起请求获得数据
        const res = await deptListAPI()
        // 保存数据源
        // this.list = res.data.depts
        this.list = this.trunData(res.data.depts, '')
        // 服务器返回的组织架构中的第一条数据应该是头部的数据
        this.myObj = res.data.depts[0]
        // 动态添加manager
        this.myObj.manager = '负责人'
        // 动态添加 isHead
        this.myObj.isHead = true
      } catch (err) {
        console.log(err)
      }
    },
    // 定义一个转换数据的方法
    trunData(arr, pid) {
      const res = []
      arr.forEach((item) => {
        if (item.pid === pid) {
          const children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    }
  }
}
</script>

<style lang="scss">
.department {
  margin: 25px;
  .mytab {
    margin: 20px 18px 15px 40px;
    #tab-first {
      font-size: 16px;
    }
  }
  .content {
    margin: 30px 120px;
    .left {
      i {
        margin-right: 10px;
      }
      font-weight: 700;
    }
    .right {
      text-align: right;
      .manager {
        margin-right: 10px;
        font-size: 16px;
      }
      .el-dropdown-link {
        font-size: 16px;
      }
    }
    hr {
      height: 1px;
      background-color: #aaa;
      border: 0;
    }
    .son {
      margin-top: 10px;
    }
  }
}
</style>
